<?php echo $this->render('/public/header'); ?>
<?php use yii\helpers\Url; ?>
<style>.input-noboder {
        border: none;
        padding: 0px;
        margin: 0px;
    }</style>
<script src="https://cdn.bootcss.com/element-ui/1.4.2/index.js"></script>
<link href="https://cdn.bootcss.com/element-ui/1.4.2/theme-default/index.css" rel="stylesheet">
<style>
    input[type=file] {
        display: none
    }

    label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
        font-weight: 700;
    }

    .pay_show ul li {
        border: 1px solid black;
        margin-top: 10px;
        padding: 5px
    }
    .el-upload-dragger{
        width:80px
    }
</style>
<div class="col-lg-12" id="main">
    <a href="javascript:window.history.go(-1);" class="layui-btn layui-btn-normal" style="margin-left:25px">返回</a>
    <br/>
    <br/>
    <div class="col-lg-12 col-md-12" id="tableController">
        <div class="col-lg-4 col-md-4">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon" style="width:100px">buyer</div>
                    <!-- <input type="text" class="form-control" v-model="customer_info.buyer"> -->
                    <el-autocomplete
                            v-model="customer_info.buyer"
                            :fetch-suggestions="querySearchAsync"
                            placeholder="搜索用户"
                            @select="handleSelect"
                    ></el-autocomplete>
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon" style="width:100px">Address</div>
                    <input type="text" class="form-control" v-model="customer_info.address">
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon" style="width:100px">客户Email</div>
                    <input type="text" class="form-control" v-model="customer_info.email">
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon" style="width:100px">tel</div>
                    <input type="text" class="form-control" v-model="customer_info.tel">
                </div>
            </div>
        </div>
        <br/>
        <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon" style="width:100px">date</div>
                    <input type="date" style="width:201px" class="form-control" v-model="date">
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon" style="width:100px">pi编号</div>
                    <input type="text" style="width:201px" class="form-control" v-model="pi_id">
                </div>
            </div>

            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon" style="width:100px">Sale rep</div>
                    <input type="text" class="form-control" v-model="sale_rep">
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon" style="width:100px">email</div>
                    <input type="text" class="form-control" v-model="email">
                </div>
            </div>
        </div>
        <br/>
        <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
            <div style="float: right">
                额外费用
                <el-switch
                        name="extra_fee"
                        v-model="extra_fee_show"
                        on-color="#13ce66"
                        on-value="true"
                        off-value="false"
                        off-color="#ff4949"
                        :on-change="this.handleextra_fee()">
                </el-switch>
                总额
                <el-switch
                        name="subtotal"
                        v-model="subtotal_show"
                        on-color="#13ce66"
                        on-value="true"
                        off-value="false"
                        off-color="#ff4949"
                        :on-change="this.handlesubtotal()">
                </el-switch>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>Item Name</th>
                        <th>性质</th>
                        <th style="width:80px">上传图片</th>
                        <th style="width:140px">图片预览</th>
                        <th style="width:300px">Description</th>
                        <th>Price</th>
                        <th>Qty (pcs)</th>
                        <th>Extra Fee</th>
                        <th>Subtotal</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(i,k) in list">
                        <td><input style="width:100%;" v-model="i.item"/></td>
                        <td>
                            <el-select v-model="i.type" filterable>
                                <el-option v-for="item in options" :label="item.label" :value="item.value"
                                           :key="item.value"></el-option>
                            </el-select>
                        </td>
                        <td>
                            <div class="source">
                                <el-upload
                                        :drag=true
                                        :name="'img_'+k"
                                        class="upload-demo"
                                        action="/sell/upload_img"
                                        :on-success="handlesuccess"
                                >
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                </el-upload>
                            </div>
                        </td>
                        <td>
                            <div v-for="(img,k2) in i.img_src" style="width:120px">
                                <i class="middleImg icon tu_04" @click="del_img(k,k2)" style="float:right"></i>
                                <img :src="img" style="max-width:100px"/>
                            </div>
                        </td>
                        <td><textarea onkeyup="Base.adjustObjHeight(this, 50)"
                                      style="width:100%;height:35px;overflow:hidden" v-model="i.description"></textarea>
                        </td>
                        <td>$<input type="number" style="width:80%" v-model="i.price"/></td>
                        <td>pcs<input type="number" style="width:80%" v-model="i.pcs"/></td>
                        <td><input type="number" style="width:100%" v-model="i.extra_fee"/></td>
                        <td>{{(i.price*i.pcs+parseFloat(i.extra_fee)).toFixed(2)}}</td>
                        <td>
                            <i class="middleImg icon tu_09" @click="del_list(k)"></i>
                            <i class="middleImg icon tu_10" @click="add_list()"></i>
                        </td>
                    </tr>
                    <tr :class="service.show=='true'?'':'active'">
                        <td style="text-align: center">
                            <s v-if="service.show=='true'?'':'active'">Service Fee</s>
                            <p v-else>Service Fee</p>
                        </td>
                        <td colspan="3"></td>
                        <td>
                            {{service.description}}</el-input>

                        </td>
                        <td>${{service.fee}}</td>
                        <td colspan="3">实际服务费收款${{real_service_fee}}</td>
                        <td>
                            <el-switch
                                    v-model="service.show"
                                    on-color="#13ce66"
                                    off-color="#ff4949"
                                    on-value="true"
                                    off-value="false"
                            >
                            </el-switch>
                        </td>
                    </tr>
                    <tr :class="ship.show=='true'?'':'active'">
                        <td style="text-align: center">
                            <s v-if="ship.show=='true'?'':'active'">Shipping Fee</s>
                            <p v-else>Shipping Fee</p>
                        </td>
                        <td colspan="3"></td>
                        <td>
                            <el-input type="textarea" autosize placeholder="运费描述" v-model="ship.description"></el-input>
                        </td>
                        <td>
                            $<input type="number" style="width:80%" placeholder="运费金额"
                                    v-model="ship.fee"/></td>
                        <td colspan="3"></td>
                        <td>
                            <el-switch
                                    v-model="ship.show"
                                    on-color="#13ce66"
                                    off-color="#ff4949"
                                    on-value="true"
                                    off-value="false"
                            >
                            </el-switch>
                        </td>
                    </tr>
                    <tr :class="duty.show=='true'?'':'active'">
                        <td style="text-align: center">
                            <s v-if="duty.show=='true'?'':'active'">Import Duty</s>
                            <p v-else>Import Duty</p>
                        </td>
                        <td colspan="3"></td>
                        <td>
                            <el-input type="textarea" autosize placeholder="税费描述" v-model="duty.description"></el-input>
                        </td>
                        <td>
                            $<input type="number" style="width:80%" placeholder="税费金额"
                                    v-model="duty.fee"/>
                        </td>
                        <td colspan="3"></td>
                        <td>
                            <el-switch
                                    v-model="duty.show"
                                    on-color="#13ce66"
                                    on-value="true"
                                    off-value="false"
                                    off-color="#ff4949"
                            >
                            </el-switch>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-lg-12 col-sm-12 col-xs-12" style="margin-top:20px;padding-top: 20px">
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                    <label>使用优惠券</label>
                    <el-switch
                            v-model="coupon"
                            on-color="#13ce66"
                            off-color="#ff4949"
                            @change="showCoupon"
                    ></el-switch>
                    <div v-if="coupon">
                        <el-card v-if="old_coupon" style="margin-top:10px" class="box-card">
                            <div class="text item">
                                {{old_coupon}}
                                <el-button :type="couponInfo(old_coupon)" style="float:right"
                                           @click="useCoupon(old_coupon)">
                                    {{couponInfo(old_coupon)=='success'?'当前使用':'使用'}}
                                </el-button>
                            </div>
                        </el-card>
                        <div v-if="haveCoupon">
                            <el-card style="margin-top:10px" class="box-card" v-for="(v,k) in couponList" :key="k">
                                <div class="text item">
                                    {{v.number_no }}
                                    <el-button :type="couponInfo(v.number_no)" style="float:right"
                                               @click="useCoupon(v.number_no)">
                                        {{couponInfo(v.number_no)=='success'?'当前使用':'使用'}}
                                    </el-button>
                                </div>
                            </el-card>
                        </div>
                        <div v-else>
                            当前客户没有优惠券
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top:20px">
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                    <label>总额显示</label>

                    <div class="form-inline">
                        <span>总金额:</span>
                        <span>${{amount}}</span>
                        <el-switch
                                v-model="total_amount_show"
                                on-color="#13ce66"
                                off-color="#ff4949"
                                on-value="true"
                                off-value="false"
                        ></el-switch>
                    </div>
                </div>
            </div>

            <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12" style="margin-top:30px">
                <label>付款方式</label>
                <el-checkbox-group v-model="pay_show">
                    <el-checkbox label=1>tt</el-checkbox>
                    <el-checkbox label=2>西联</el-checkbox>
                    <el-checkbox label=3>paypal</el-checkbox>
                </el-checkbox-group>
                <div class="pay_show">
                    <ul>
                        <li v-if="pay_detail_show(1)">
                            <strong>TT详情</strong><br/>
                            Bank Information for Wire Transfer(Customer is responsible for "All Bank's Charges")<br/>
                            Beneficiary’s Bank: BANK OF COMMUNICATIONS CO.,LTD OFFSHORE BANKING UNIT<br/>
                            Address: NO 188, YINCHENG ZHONG ROAD, SHANGHAI, CHINA<br/>
                            Beneficiary’s Name: Jingwholesale Trading Co., Limited<br/>
                            Account: OSA90000196048100<br/>
                            Swift Code: COMMCN3XOBU<br/>
                        </li>
                        <li v-if="pay_detail_show(2)">
                            <strong>西联详情</strong><br/>
                            PAYMENT FOR WESTERN UNION / MONEYGRAM (Please send to cash with USD not CNY)<br/>
                            First Name: Jing<br/>
                            Last Name: Zhu <br/>
                            Beneficiary’s City: Yiwu, Zhejiang Province, China. Postcode:322000<br/>
                        </li>
                        <li v-if="pay_detail_show(3)">
                            <strong>paypal详情</strong><br/>
                            PAYMENT FOR PAYPAL (Customer is responsible for "PayPal's service Charges")<br/>
                            Account: customers@jingwholesale.com<br/>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top:20px">
                <label>报价备注</label>
                <br/>
                <ul class="list-group">
                    <li class="list-group-item" style="padding:0;border:none;margin:2px" v-for="(i,k) in this.para">
                        <input type="text" v-model="i.p" style="width:100%;font-weight: bold" v-if="k==1 || k==3"/>
                        <input type="text" v-model="i.p" style="width:100%;" v-else/>
                    </li>
                </ul>
            </div>
            <br/>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <button type="submit" class="btn btn-primary" @click="upload()">确认添加</button>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#tableController",
            data: {
                coupon: false,
                coupon_id: '',
                old_coupon: '',
                couponList: '',
                haveCoupon: false,
                list:<?php echo $this->params['pi_info']['product_list'];?>,
                options:<?php echo json_encode(yii::$app->params['product_type']);?>,
                number: "<?php echo $this->params['pi_info']['number'];?>",
                email: "<?php echo $this->params['param']['email'];?>",
                sale_rep: "<?php echo $this->params['param']['sale_rep'];?>",
                date: "<?php echo date('Y-m-d');?>",
                customer_info:<?php echo $this->params['pi_info']['customer_info'];?>,
                para: [
                    {"p": "This quotation is only valid for maximum 10 days."},
                    {"p": "1. Payment Term"},
                    {"p": "30% deposit before producing, and the balance before shipping."},
                    {"p": "2. Producing Time"},
                    {"p": "The merchandise will be ready for shipping in 10-15 days, after receiving the deposit."}
                ],
                service:<?php echo $this->params['pi_info']['service'];?>,
                ship:<?php echo $this->params['pi_info']['ship'];?>,
                duty:<?php echo $this->params['pi_info']['duty'];?>,
                subtotal_show: "true",
                extra_fee_show: "true",
                total_amount_show: "true",
                pi_id: '<?php echo yii::$app->request->get('id');?>',
                pay_show:<?php echo $this->params['pi_info']['pay_show'];?>,
                job_number:<?php echo $this->params['pi_info']['job_number'];?>
            },

            computed: {
                service_fee: function () {
                    let sum = 0;
                    this.list.forEach(v => {
                        if (v.type == 1) {
                            sum += v.price * v.pcs + parseFloat(v.extra_fee);
                        }
                    });
                    let fee = Base.service_fee(sum);
                    if (sum <= 1000) {
                        this.service.description = "The value of all products in this order is $" + sum
                            + ". Service fee  is $100.";
                    } else {
                        this.service.description = "The value of all products in this order is $" + sum
                            + ". Service fee rate is " + Base.service_rate(sum) + '%';
                    }
                    return fee;
                },
                real_service_fee: function () {
                    let sum = 0;
                    let discount = 0;
                    this.list.forEach(v => {
                        if (v.type == 1) {
                            sum += v.price * v.pcs + parseFloat(v.extra_fee);
                        }
                        if (v.type == 3) {
                            discount += v.price * v.pcs + parseFloat(v.extra_fee);
                        }
                    });
                    return (Base.service_fee(sum) - discount > 0) ? Base.service_fee(sum) - discount : 0;
                },
                amount: function () {
                    var total = 0;
                    this.list.forEach(v => {
                        if (v.type != 3) {
                            total += v.price * v.pcs + parseFloat(v.extra_fee);
                        }
                    });
                    if (this.service.show == 'true') {
                        total += this.real_service_fee;
                    }
                    if (this.ship.show == 'true') {
                        total += parseFloat(this.ship.fee);
                    }
                    if (this.duty.show == 'true') {
                        total += parseFloat(this.duty.fee);
                    }
                    if (this.coupon_id) {
                        if (this.coupon_id == this.old_coupon) {
                            total -= parseFloat(this.free);
                        }
                        if(this.couponList) {
                            this.couponList.forEach(v => {
                                if (v.number_no == this.coupon_id) {
                                    total -= parseFloat(v.detail.free);
                                }
                            })
                        }

                    }
                    return total.toFixed(2);
                }
            },
            watch: {
                service_fee: function (v) {
                    this.service.fee = v;
                }
            },
            methods:
                {
                    couponInfo: function (v) {
                        if (v == this.coupon_id) {
                            return 'success';
                        }
                        return 'default';
                    },
                    useCoupon: function (v) {
                        this.coupon_id = v;
                    },
                    checkCoupon: function (v) {
                        let that = this;

                        $.post('/api/coupon/validate', {
                            id: v,
                            customer_num: that.number
                        }, (res) => {
                            that.coupon_detail = res.msg;
                            if (res.code == 1) {
                                that.coupon_valid = true;
                            }
                        }, 'json');
                    },
                    showCoupon: function (v) {
                        if (v) {
                            if (this.number) {
                                $.post('/api/coupon/valid', {number: this.number}, (res) => {
                                    if (res.code == 1) {
                                        this.haveCoupon = true;
                                        this.couponList = res.msg
                                    } else {
                                        this.haveCoupon = false;
                                    }
                                }, 'json')
                            } else {
                                layer.alert('当前用户没有客户编号');
                            }
                        }
                    },
                    checkCoupon: function (v) {
                        let that = this;

                        $.post('/api/coupon/validate', {
                            id: v,
                            customer_num: that.number
                        }, (res) => {
                            that.coupon_detail = res.msg;
                            if (res.code == 1) {
                                that.coupon_valid = true;
                            }
                        }, 'json');
                    },

                    handlesuccess: function (res) {
                        if (res.code == 1) {
                            var k = res.name.split("_")[1];
                            if (this.list[k].img_src.length >= 1) {
                                this.$message("最多上传一张图片");
                                return false;
                            }
                            this.list[k].img_src.push(res.msg);

                        }
                    },
                    del_img: function (listk, imgk) {
                        this.list[listk].img_src.splice(imgk, 1);
                    },
                    del_list: function (k) {
                        if (this.list.length == 1) {
                            layer.alert("不能再删除了哦");
                            return false;
                        }
                        this.list.splice(k, 1);
                    },
                    add_list: function () {
                        this.list.push({
                            "item": "",
                            img_src: [],
                            description: "",
                            price: 0,
                            "pcs": 1,
                            extra_fee: 0,
                            subtotal: ""
                        });

                        setTimeout(function () {
                            vm.handleextra_fee();
                            vm.handlesubtotal();
                        }, 1);
                    },
                    upload: function () {
                        if (!this.customer_info.buyer) {
                            layer.alert("客户名称未填");
                            return false;
                        }
                        if (!this.list[0].item) {
                            layer.alert("没有报价产品");
                            return false;
                        }
                        var url = "<?php echo Url::to(['sell/add_invoice']);?>";
                        for (k in this.list) {
                            if (!(parseInt(this.list[k]['type']) >= 1)) {
                                layer.alert('产品性质未选择');
                                return false;
                            }
                            this.list[k]['subtotal'] = this.list[k]['price'] * this.list[k]['pcs'] + parseFloat(this.list[k]['extra_fee']);
                        }
                        var str = JSON.stringify(this.list);
                        var pay_show = JSON.stringify(this.pay_show);
                        var data =
                            {
                                date: this.date, list: str, number: this.number, email: this.email,
                                sale_rep: this.sale_rep, customer_info: this.customer_info,
                                service_fee: this.service_fee,
                                para: this.para, service: this.service, ship: this.ship, duty: this.duty,
                                extra_fee_show: this.extra_fee_show, subtotal_show: this.subtotal_show,
                                total_amount_show: this.total_amount_show,
                                pi_id: this.pi_id, pay_show: pay_show,
                                job_number: this.job_number, coupon_id: this.coupon_id
                            };
                        if (this.coupon_valid) {
                            data.coupon_id = this.cooupon_id;
                        }
                        layer.confirm('确认提交', function () {
                            $.post(url, data, function (res) {
                                if (res.code != 1) {
                                    layer.alert(res.msg);
                                }
                                else {
                                    layer.confirm(res.msg, {}, function () {
                                        window.location.href = "/sell/invoice_list";
                                    })
                                }

                            }, 'json')
                        })

                    },
                    querySearchAsync: function (queryString, cb) {
                        if (queryString != "") {
                            $.post('/api/search_customer_by_like', {name: queryString}, function (res) {
                                if (res.data) {
                                    cb(res.data);
                                }

                            }, 'json')
                        }

                    },
                    handleSelect: function (item) {
                        this.customer_info.buyer = item.value;
                        this.customer_info.email = item.email;
                        this.number = item.number;
                    },
                    handleextra_fee: function () {
                        if (this.extra_fee_show == 'false') {
                            $("table tr").find("th:eq(6)").hide();
                            $("table tr").find("td:eq(6)").hide();
                        }
                        else {
                            $("table tr").find("th:eq(6)").show();
                            $("table tr").find("td:eq(6)").show();
                        }
                    },
                    handlesubtotal: function () {
                        if (this.subtotal_show == 'false') {
                            $("table tr").find("th:eq(7)").hide();
                            $("table tr").find("td:eq(7)").hide();
                        }
                        else {
                            $("table tr").find("th:eq(7)").show();
                            $("table tr").find("td:eq(7)").show();
                        }
                    },
                    pay_detail_show: function (v) {

                        for (i in this.pay_show) {
                            if (this.pay_show[i] == v) {
                                return true
                            }
                        }
                        return false;
                    }
                }

        });
        $(function () {
            if (vm.subtotal_show == 'false') {
                $("table tr").find("th:eq(7)").hide();
                $("table tr").find("td:eq(7)").hide();
            }
            if (vm.extra_fee_show == 'false') {
                $("table tr").find("th:eq(6)").hide();
                $("table tr").find("td:eq(6)").hide();
            }
        })
    </script>
    <?php echo $this->render('/public/footer'); ?>
